<template>

    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-tickets"></i> 提现列表</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <!-- 筛选功能 等待添加 -->
            <!-- <div class="handle-box">
            <el-button type="primary" icon="delete" class="handle-del mr10" @click="delAll">批量删除</el-button>
            <el-select v-model="select_cate" placeholder="筛选省份" class="handle-select mr10">
                <el-option key="1" label="广东省" value="广东省"></el-option>
                <el-option key="2" label="湖南省" value="湖南省"></el-option>
            </el-select>
            <el-input v-model="select_word" placeholder="筛选关键词" class="handle-input mr10"></el-input>
            <el-button type="primary" icon="search" @click="search">搜索</el-button>
        </div> -->

            <el-table v-loading="loading" class='table-wrapper' :data="tableData" :default-sort="{prop: 'date', order: 'descending'}" size='small'>
                <el-table-column type="index" :index="indexMethod">
                </el-table-column>
                <!-- <el-row> -->
                <el-table-column prop="name" label="用户名称" width="170">
                </el-table-column>
                <el-table-column prop="date" label="时间" width="150" sortable>
                    <template slot-scope="scopeData">
                        <div>{{scopeData.row.date | fomatTime}}</div>
                    </template>
                </el-table-column>

                <el-table-column prop="drawMoney" label="提现金额" width="100">
                    <template slot-scope="scopeData">
                        {{scopeData.row.drawMoney | getPrice}}
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="状态" width="100">
                    <template slot-scope="scopeData">
                        {{scopeData.row.status | drawMoneyFliter}}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="170">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)" v-if='scope.row.status !==2'>编辑</el-button>
                        <el-button size="mini" @click="handleOpenWithdrawDetailDialog(scope.row.openid)">余额明细</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="phone" label="手机号" width="180">
                </el-table-column>
                <el-table-column prop="openid" label="用户openid" width="180">
                </el-table-column>
                <el-table-column prop="id" label=提现id width="100">
                </el-table-column>

            </el-table>

            <div class="pagination">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="10"
                    layout="total, prev, pager, next" :total="totalNum" class="pagination-order">
                </el-pagination>
            </div>
        </div>

        <!-- 编辑弹出框 -->
        <el-dialog :title="title" :visible.sync="dialogFormVisible">
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel({type: 'off'})">取 消</el-button>
                <el-button type="primary" @click="cancel({type:'on',data:{}})">确 定</el-button>
            </div>
        </el-dialog>
        <withdraw-detail-dialog
            :openid="openIdForDialog"
            @close="withdrawDetailModalVisible = false"
            :visible="withdrawDetailModalVisible"
        />
    </div>

</template>




<script>
import { api } from "@/api/api.js";
import methods from "@/util/methods";
import WithdrawDetailDialog from "./WithdrawDetailDialog";

export default {
  data() {
    return {
      tableData: null,
      totalNum: 0,
      currentPage: 1,
      pageSize: 10,
      dialogFormVisible: false,
      isCollapse: true,
      currIndex: null,
      title: "审核",
      rowList: {},
      loading: false,
      withdrawDetailModalVisible: false,
      openIdForDialog: ""
    };
  },
  methods: {
    cancel(msg) {
      let type = msg.type;
      switch (type) {
        case "on": {
          this.drawMoneySuccess();
          break;
        }
        case "off": {
          break;
        }
      }
      this.dialogFormVisible = false;
    },
    handleEdit(index, row) {
      this.currIndex = index;
      this.title = "此操作将确认提现状态, 是否继续?";
      this.dialogFormVisible = true;
    },
    indexMethod(index) {
      let i = (this.currentPage - 1) * 10 + index + 1;
      return i;
    },
    getdrawMoneyUser() {
      this.loading = true;
      this.http
        .post(api.drawMoneyUser, { page: this.currentPage, size: 10 })
        .then(({ data }) => {
          const { data: tableData } = data;
          this.tableData = tableData;
          this.totalNum = data.total;
        })
        .finally(() => (this.loading = false));
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.getdrawMoneyUser();
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    signOut: methods.signOut,
    drawMoneySuccess() {
      let currIndex = this.currIndex;
      let row = this.tableData[currIndex];
      let openid = row.openid;
      let formId = "";
      let drawMoney = row.drawMoney;
      let drawMoneyId = String(row.id);

      this.http
        .post(api.drawMoneySuccess, {
          openid,
          formId,
          drawMoneyId,
          drawMoney
        })
        .then(res => {
          if (res.data.code == 200) {
            let currData = row;
            currData.drawMoney = 0;
            currData.status = 2;
            this.$set(this.tableData, currIndex, currData);
            this.$message({
              type: "success",
              message: "修改成功!",
              center: true
            });
            this.getdrawMoneyUser();
            // document.location.reload(true);
            this.set(); //todo
          } else {
            self.$message({
              type: "warn",
              message: res.data.msg,
              center: true
            });
          }
        });
    },
    handleOpenWithdrawDetailDialog(openId) {
      this.openIdForDialog = openId;
      this.withdrawDetailModalVisible = true;
    }
  },
  mounted() {
    this.getdrawMoneyUser();
  },
  components: {
    WithdrawDetailDialog
  }
};
</script>

<style lang="scss" scoped>
.is-active {
  color: #303133;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 200px;
}

.goods-wrapper {
  border: 1px solid black;
  vertical-align: middle;
  padding-left: 6px;
}

.box-1 {
  display: flex;
  justify-content: space-between;
}

.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}

.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.pagination-order {
  margin: auto;
}

.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}

.del-dialog-cnt {
  font-size: 16px;
  text-align: center;
}
</style>
